<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/xiaomi.css"/>
		<link rel="stylesheet" type="text/css" href="lib/bootstrap-3.3.7-dist/css/bootstrap.css"/>
		<script type="text/jscript" src="lib/jquery/jquery-1.11.1.js"></script>
		<script type="text/javascript" src="lib/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
	</head>
	<body>
		<div class="main">
			<!--整个网页的上半部分-->
			<div class="header">
				<!-- 导航栏 -->
				<div class="nav" >
					<div class="container">
						<ul>
							<li class="nav1"><a href="#">小米商城</a></li>
							<li class="nav1"><a href="#">MIUI</a></li>
							<li class="nav1"><a href="#">IoT</a></li>
							<li class="nav1"><a href="#">云服务</a></li>
							<li class="nav1"><a href="#">金融</a></li>
							<li class="nav1"><a href="#">有品</a></li>
							<li class="nav1"><a href="#">小爱开放平台</a></li>
							<li class="nav1"><a href="#">政企服务</a></li>
							<li class="nav1"><a href="#">Select Region</a></li>
							<li class="nav10"><a href="#">登录</a></li>
							<li class="nav11"><a href="#">注册</a></li>
							<li class="nav11"><a href="#">消息通知</a></li>
							<li class="nav11"><a href="#">购物车(0)</a></li>
						</ul>
					</div>
				</div>
				<!-- logo导航栏 -->
				<div class="logo-nav">
					<div class="logo">
						<img class="logo1" src="img/01.png"  width="62px" height="55px"/>
						<img class="logo2" src="img/04.png"  width="127px" height="65px"/>
						<div class="subnav">
							<ul>
								<li class="nav1"><a href="#">小米手机</a></li>
								<li class="nav1"><a href="#">红米</a></li>
								<li class="nav1"><a href="#">电视</a></li>
								<li class="nav1"><a href="#">笔记本</a></li>
								<li class="nav1"><a href="#">空调</a></li>
								<li class="nav1"><a href="#">新品</a></li>
								<li class="nav1"><a href="#">路由器</a></li>
								<li class="nav1"><a href="#">智能硬件</a></li>
								<li class="nav1"><a href="#">服务</a></li>
								<li class="nav1"><a href="#">社区</a></li>
							</ul>
							<span>
								<form class="navbar-form navbar-left" role="search">
									<div class="form-group">
									    <input type="text" class="form-control" placeholder="Search">
									</div>
									<button type="submit" class="btn btn-default"> <span class="glyphicon glyphicon-search"></span> </button>
								</form>
							</span>
						</div>
					</div>
				</div>
			</div>
			<div class="center ">
				<!-- 中间上半部分 -->
				<div class="cen-top">
					<!-- 中间上半部分的右半部分 -->
					<div class="cen-top-right">	
						<img src="img/06_meitu_1.jpg" />
					</div>
					<!--左半部分-->
					<div class=" cen-top-left">
						<div class="tag"><a href="#">手机 电话卡&nbsp;&nbsp;&nbsp;></a></div>
						<div class="tag"><a href="#">电视 盒子&nbsp;&nbsp;&nbsp;&nbsp;></a></div>
						<div class="tag"><a href="#">笔记本 平板&nbsp;&nbsp;&nbsp;></a></div>
						<div class="tag"><a href="#">家电 插线板&nbsp;&nbsp;&nbsp;></a></div>
						<div class="tag"><a href="#">出行 穿戴&nbsp;&nbsp;&nbsp;&nbsp;></a></div>
						<div class="tag"><a href="#">智能 路由器&nbsp;&nbsp;&nbsp;></a></div>
						<div class="tag"><a href="#">电源 配件&nbsp;&nbsp;&nbsp;&nbsp;></a></div>
						<div class="tag"><a href="#">个护 儿童&nbsp;&nbsp;&nbsp;&nbsp;></a></div>
						<div class="tag"><a href="#">耳机 音箱&nbsp;&nbsp;&nbsp;&nbsp;></a></div>
						<div class="tag"><a href="#">生活 箱包&nbsp;&nbsp;&nbsp;&nbsp;></a></div>
					</div>
				</div>
				<!-- 中间的中间部分 -->
				<div class="cen-center">
					<div class="middle1">
						<img src="img/09_meitu_1.jpg" width="234px" height="170px"/>
					</div>
					<div class="middle2">
						<img src="img/07.jpg" width="316px" height="170px"/>&nbsp;&nbsp;
						<img src="img/08.jpg" width="316px" height="170px"/>&nbsp;&nbsp;
						<img src="img/09.jpg" width="316px" height="170px"/>
					</div>
				</div>
				<!-- 闪购开始 -->
				<div class="shangou">
						<div class="shangou-title">
							<p>小米闪购</p> 
						</div>
						<div class="shangou-goods">
							<img class="shangou-goods-pic" src="img/10.png" />
							<img class="shangou-goods-pic" src="img/11.png" />
							<img class="shangou-goods-pic" src="img/12.png" />
							<img class="shangou-goods-pic" src="img/13.png"/>
							<img class="shangou-goods-pic" src="img/14.png" />
						</div>
				</div>
				<!--闪购结束图片-->
				<div class="shangou-end-pic">
					<img class="shangou-end-pic" src="img/15.jpg" />
				</div>
			</div>
			<!--整个网页的下半部分-->
			<div class="second-center">
				<!--手机部分-->
				<div class="mbphone">
					<div class="mbphone-title">
						<p>手机</p> 
					</div>
					<div class="mbphone-goods">
						<div class="mbphone-goods-left">
							<img class="mbphone-goods-left-pic" src="img/16.jpg" width="234px" height="628px"/>
						</div>
						<div class="mbphone-goods-right">
							<img class="mbphone-goods-right-pic" src="img/18.png" />
							<img class="mbphone-goods-right-pic" src="img/18.png" />
							<img class="mbphone-goods-right-pic" src="img/18.png" />
							<img class="mbphone-goods-right-pic" src="img/18.png" />
							<img class="mbphone-goods-right-pic" src="img/18.png" />
							<img class="mbphone-goods-right-pic" src="img/18.png" />
							<img class="mbphone-goods-right-pic" src="img/18.png" />
							<img class="mbphone-goods-right-pic" src="img/18.png" />
							<br />
						</div>
					</div>
				</div>
				<!--家电部分-->
				<div class="jiadian">
					<div class="jiadian-title">
						<p>家电</p> 
					</div>
					<div class="jiadian-goods-top">
						<img class="jiadian-goods-pic" src="img/20.png" />
						<img class="jiadian-goods-pic" src="img/19.png" />
						<img class="jiadian-goods-pic" src="img/19.png" />
						<img class="jiadian-goods-pic" src="img/19.png" />
						<img class="jiadian-goods-pic" src="img/19.png" />
						<br />
						<br />
						<img class="jiadian-goods-pic" src="img/20.png" />
						<img class="jiadian-goods-pic" src="img/19.png" />
						<img class="jiadian-goods-pic" src="img/19.png" />
						<img class="jiadian-goods-pic" src="img/19.png" />
						<img class="jiadian-goods-pic" src="img/19.png" />
					</div>
					<div class="jiadian-goods-bottom">
						<img class="jiadian-goods-bottom-pic" src="img/21.jpg" />
					</div>
				</div>
				<!--智能部分-->
				<div class="zhineng">
					<div class="zhineng-title">
						<div class="zhineng-title-tag1"><a href="#">智能</a></div> 
						<div class="zhineng-title-tag2"><a href="#">路由器</a></div>
						<div class="zhineng-title-tag2"><a href="#">酷玩</a></div>
						<div class="zhineng-title-tag2"><a href="#">健康</a></div>
						<div class="zhineng-title-tag2"><a href="#">出行</a></div> 
						<div class="zhineng-title-tag2"><a href="#">热门</a></div> 
					</div>
					<div class="zhineng-goods-top">
						<img class="zhineng-goods-pic" src="img/22.png" />
						<img class="zhineng-goods-pic" src="img/23.png"  />
						<img class="zhineng-goods-pic" src="img/23.png"  />
						<img class="zhineng-goods-pic" src="img/23.png"  />
						<img class="zhineng-goods-pic" src="img/23.png" />
						<br />
						<br />
						<img class="zhineng-goods-pic" src="img/22.png"  />
						<img class="zhineng-goods-pic" src="img/23.png" />
						<img class="zhineng-goods-pic" src="img/23.png" />
						<img class="zhineng-goods-pic" src="img/23.png" />
						<img class="zhineng-goods-pic" src="img/23.png" />
					</div>
					<div class="zhineng-goods-bottom">
						<img class="zhineng-goods-bottom-pic" src="img/24.jpg" />
					</div>
				</div>
				<!--搭配部分-->
				<div class="dapei">
					<div class="dapei-title">
						<div class="dapei-title-tag1"><a href="#">搭配</a></div> 
						<div class="dapei-title-tag2"><a href="#">电池存储卡</a></div>
						<div class="dapei-title-tag2"><a href="#">电源</a></div>
						<div class="dapei-title-tag2"><a href="#">耳机音箱</a></div>
						<div class="dapei-title-tag2"><a href="#">热门</a></div> 
					</div>
					<div class="dapei-goods-top">
						<img class="dapei-goods-pic" src="img/24.png" />
						<img class="dapei-goods-pic" src="img/25.png"  />
						<img class="dapei-goods-pic" src="img/25.png"  />
						<img class="dapei-goods-pic" src="img/25.png"  />
						<img class="dapei-goods-pic" src="img/25.png" />
						<br />
						<br />
						<img class="dapei-goods-pic" src="img/24.png"  />
						<img class="dapei-goods-pic" src="img/25.png" />
						<img class="dapei-goods-pic" src="img/25.png" />
						<img class="dapei-goods-pic" src="img/25.png" />
						<img class="dapei-goods-pic" src="img/25.png" />
					</div>
					<div class="dapei-goods-bottom">
						<img class="dapei-goods-bottom-pic" src="img/25.jpg" />
					</div>
				</div>
				<!--配件周边同上，此处省略-->
				<!--热评商品-->
				<div class="hotgoods">
					<div class="hotgoods-title">
						<div class="hotgoods-title-tag1"><a href="#">热评商品</a></div> 
					</div>
					<div class="hotgoods-goods">
						<div><img class="hotgoods-goods-pic" src="img/26.png" /></div>
						<div><img class="hotgoods-goods-pic" src="img/26.png"  /></div>
						<div><img class="hotgoods-goods-pic" src="img/26.png"  /></div>
						<div><img class="hotgoods-goods-pic" src="img/26.png"  /></div>
					</div>
				</div>
			</div>
			<!--网页底端-->
			<div class="footer">
				<div class="services">
					<ul>
						<li class="ser-tag"><a href="#">预约维修服务</a></li>
						<li class="ser-tag"><a href="#">7天无理由退货</a></li>
						<li class="ser-tag"><a href="#">15天免费换货</a></li>
						<li class="ser-tag"><a href="#">满150元包邮</a></li>
						<li class="ser-tag"><a href="#">520余家售后网点</a></li>
					</ul>
				</div>
				<br /><hr />
				<div class="links">
					<div class="links-list">
						<ul>
							<li>服务支持</li>
							<br />
							<li><a href="#">售后政策</a></li>
							<li><a href="#">自助服务</a></li>
							<li><a href="#">相关下载</a></li>
						</ul>
					</div>
					<div class="links-list">
						<ul>
							<li>帮助中心</li>
							<br />
							<li><a href="#">账户管理</a></li>
							<li><a href="#">购物指南</a></li>
							<li><a href="#">订单操作</a></li>
						</ul>
					</div>
					<div class="links-list">
						<ul>
							<li>线下门店</li>
							<br />
							<li><a href="#">小米之家</a></li>
							<li><a href="#">服务网点</a></li>
							<li><a href="#">授权体验店</a></li>
						</ul>
					</div>
					<div class="links-list">
						<ul>
							<li>关于小米</li>
							<br />
							<li><a href="#">了解小米</a></li>
							<li><a href="#">加入小米</a></li>
							<li><a href="#">投资者关系</a></li>
						</ul>
					</div>
					<div class="links-list">
						<ul>
							<li>关注我们</li>
							<br />
							<li><a href="#">新浪微博</a></li>
							<li><a href="#">官方微信</a></li>
							<li><a href="#">联系我们</a></li>
						</ul>
					</div>
					<div class="links-list">
						<ul>
							<li>特色服务</li>
							<br />
							<li><a href="#">F码通道</a></li>
							<li><a href="#">礼物码</a></li>
							<li><a href="#">防伪查询</a></li>
						</ul>
					</div>
					<div class="links-list">
						<ul>
							<br />
							<li>400-100-5678</li>
							<li>周一至周日 8:00-18:00</li>
							<li>（仅收市话费）</li>
						</ul>
					</div>
				</div>
				<div class="footer-img">
					<img src="img/27.png" />
				</div>
			</div>
		</div>
	</body>
</html>
